<!DOCTYPE html>

<html lang="en">

<head>
    <title>首页</title>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Hair salon templates for mens hair cut service provider.">
    <meta name="keywords" content="hair salon website templates free download, html5 template, free responsive website templates, website layout,html5 website templates, template for website design, beauty HTML5 templates, cosmetics website templates free download">
    <title>Men Salon | Hair Salon Website Templates Free Download</title>
    <link rel="shortcut icon" href="/Content/images/favicon.ico" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="/ContentPre/css/bootstrap.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i%7cMontserrat:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/ContentPre/css/font-awesome.min.css" rel="stylesheet">
    <!-- Style -->
    <link href="/ContentPre/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js "></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js "></script>
    <![endif]-->
    <style>
        /*.navigation li.active {
            background-color: #aa9144;
        }*/
        .footer {
            background: #000000;
            padding-bottom: 100px;
        }

        .footer-block {
            background: none;
            padding-top: 0px;
        }

        .footer-widget li a, .footer .contact li {
            color: #fff;
        }

        .widget-newsletter li {
            text-align: center;
        }

        .be {
            background: url(/Content/images/be.png) no-repeat center / auto 60%;
            padding: 0px 20px;
        }

        .pinter {
            background: url(/Content/images/printerest.png) no-repeat center / auto 60%;
            padding: 0px 40px;
        }

        .pu {
            background: url(/Content/images/puxiang.png) no-repeat center / auto 60%;
            padding: 0px 20px;
        }

        .zcool {
            background: url(/Content/images/zcool.png) no-repeat center / auto 60%;
            padding: 0px 30px;
        }

        p,li{
            cursor:default;
        }

        a {
            cursor:pointer;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <a href="/PreArea/Home/Index"><img src="/Content/images/%e4%b8%80%e7%a7%8d%e6%84%9f%e5%8a%a8.png" style="height:40px;margin-top:10px;" alt=""></a>
                </div>
                <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
                    <div class="navigation">
                        <div id="navigation">
                            <ul>
                                <li class="active"><a href="/PreArea/Home/Index">首页</a></li>
                                <li>
                                    <a href="/PreArea/Home/Production">作品</a>
                                    <!--<ul>
                                        <li><a href="service-list.html" title="Service List">Service List</a></li>
                                        <li><a href="service-detail.html" title="Service Detail">Service Detail</a></li>
                                    </ul>-->
                                </li>
                                <li>
                                    <a href="/PreArea/Home/AboutUs">关于我们</a>
                                    <!--<ul>
                                        <li><a href="blog-default.html" title="Blog">Blog Default</a></li>
                                        <li><a href="blog-single.html" title="Blog Single ">Blog Single</a></li>
                                    </ul>-->
                                </li>
                                <li>
                                    <a href="/PreArea/Home/Course">课程通知</a>

                                </li>
                                <li><a href="/PreArea/Home/News">动态</a> </li>
                                <li><a href="/PreArea/Home/ContactUs">联系我们</a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<!--/main-header-->
<link href="/ContentPre/css/dropload.css" rel="stylesheet" />
<link href="/ContentPre/css/mobile.css" rel="stylesheet" />
<style>
    #navigation li:nth-child(2) a {
        color: #bebebe;
    }

    .clearfix1:after {
        display: block;
        content: '';
        line-height: 0;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
    }
</style>
<!-- //slider -->
<!-- //agents -->
<!-- Portfolio section -->
<section class="portfolio-agileinfo" id="properties" style="width:80%;margin:0 auto">
    <div class="gallery-grids">
        <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
            <ul id="myTab" class="nav nav-tabs" role="tablist" data-aos="zoom-in">
                <li role="presentation" class="btn-zp" data-type="1"><a href="javascript:void(0)" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false" style="border-radius: 10px;">Student work</a></li>
                <li role="presentation" class="btn-zp" data-type="2"><a href="javascript:void(0)" id="teach-tab" role="tab" data-toggle="tab" aria-controls="teach" aria-expanded="false" style="border-radius: 10px;">Lab work</a></li>
            </ul>
            <!--内容-->
            <div class="contents">
                <div class="tab-content clearfix"></div>
                <div class="tab-content clearfix"></div>
            </div>
            <!--分页-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div id="example" class="st-pagination" style="text-align:center;">
                    <ul id="pageLimit"></ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /Portfolio section -->
<!-- //contact -->
<!-- js -->
<script type="text/javascript" src="/ContentPre/js2/jquery-2.1.4.min.js"></script>
<!-- for bootstrap working -->
<script src="/ContentPre/js2/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- //js -->
<!-- for banner js file-->
<script type="text/javascript" src="/ContentPre/js2/jquery.zoomslider.min.js"></script><!-- zoomslider js -->
<!-- //for banner js file-->
<!-- for team slider -->
<!-- requried-jsfiles-for owl -->
<script src="/ContentPre/js2/owl.carousel.js"></script>


<style>
    .imgs_box {
        padding: 20px;
        padding-bottom: 0;
    }

        .imgs_box img {
            margin-bottom: 1px;
        }

        .imgs_box label.title {
            display: block;
            margin-left: 10px;
        }

        .imgs_box .lm {
            margin: 0 auto;
            text-align: center;
            margin-bottom: 5px;
        }

            .imgs_box .lm a {
                border: 1px solid black;
                font-family: 'Roboto', sans-serif;
                font-size: 16px;
            }

    .layui-layer {
        box-shadow: none;
        overflow-x: hidden;
    }

    .imgs_box {
        padding: 0;
    }

        .imgs_box img {
            width: 100%;
            height: 100%;
            display: block;
        }

    .layui-layer-content {
        padding-right: 20px;
        box-sizing: content-box;
        width: 103% !important;
        height: 100% !important;
    }

    .layui-layer-setwin .layui-layer-close2 {
        right: -8px;
        top: -8px;
    }

    .imgs_box .lm a {
        padding: 6px 12px;
        border-color: #343434;
        color: #333;
    }

        .imgs_box .lm a:hover {
            border-color: #fff;
            color: #000;
        }

    section.portfolio-agileinfo .portfolio-grids {
        padding: 0;
    }

        section.portfolio-agileinfo .portfolio-grids .box {
            position: relative;
            padding: 28.12%;
            border: 1px solid #fff;
        }

        section.portfolio-agileinfo .portfolio-grids a {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            box-sizing: border-box;
        }

            section.portfolio-agileinfo .portfolio-grids a img {
                transition: all 0.7s ease;
                height: 100%;
                width: 100%;
            }

            section.portfolio-agileinfo .portfolio-grids a:hover img {
                transform: scale(1.2);
            }

    .layui-layer-setwin .layui-layer-close2:hover {
        background-position: -149px -31px;
    }
</style>
<script src="/ContentPre/js2/layer/layer.js"></script>

<script src="/ContentPre/js2/SmoothScroll.min.js"></script>
<script type="text/javascript" src="/ContentPre/js2/move-top.js"></script>
<script type="text/javascript" src="/ContentPre/js2/easing.js"></script>
<script type="text/javascript" src="/ContentPre/js2/jquery.flexisel.js"></script>
<!-- testimonilas slider -->
<script src="/ContentPre/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/ContentPre/js/bootstrap.min.js"></script>
<!-- sticky header -->
<script src="/ContentPre/js/jquery.sticky.js"></script>
<script src="/ContentPre/js/sticky-header.js"></script>
<script src="/ContentPre/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="/ContentPre/js/dropload.js"></script>
<script>
    var tab1_currentPage = 1;
    var tab2_currentPage = 1;
    var itemIndex = 0;
    var tab1LoadEnd = false;
    var tab2LoadEnd = false;
    //日期格式转化
    Date.prototype.format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    jQuery(function () {
        //赋予点击事件，分类分页获取作品
        $('#myTab li').each(function (index, item) {

            $(this).click(function () {
                if ($(this).hasClass("active")) return false;//如果当前是已选中状态就不再触发
                window.type = $(this).attr("data-type");
                $('.tab-content').eq(window.type - 1).show().siblings('.tab-content').hide();
                // 如果选中菜单一
                if (window.type == 1) {
                    // 如果数据没有加载完
                    if (!tab1LoadEnd) {
                        // 解锁
                        dropload.unlock();
                        dropload.noData(false);
                    } else {
                        // 锁定
                        dropload.lock('down');
                        dropload.noData();
                    }
                    // 如果选中菜单二
                } else if (window.type == 2) {
                    if (!tab2LoadEnd) {
                        // 解锁
                        dropload.unlock();
                        dropload.noData(false);
                    } else {
                        // 锁定
                        dropload.lock('down');
                        dropload.noData();
                    }
                }
                // 重置
                dropload.resetload();
            })
        })

        //给每一个照片赋予点击事件，获取图片列表
        $('.tab-content').on('click', 'a', function (e) {
            e.preventDefault();
            //首先获取该作品的图片列表

            var pro_id = $(this).attr("data-id");
            GetProImages(pro_id);
        })

        //获取作品下的所有文件并将其展示出来
        function GetProImages(pro_id) {
            $.ajax({
                url: "/BackArea/Production/GetProImages",
                data: { pro_id: pro_id },
                type: "post",
                datatype: "json",
                success: function (data) {
                    if (data.state == "success") {
                        var modelList = data.data.modelList;
                        var proModel = data.data.proModel;
                        var $imgs_box = $('<div class="imgs_box"></div>');
                        $(modelList).each(function (index, item) {
                            $imgs_box.append($('<img src="' + item.img_path + '">'));
                        });
                        $imgs_box.append($('<label class="title">Designer:' + proModel.pro_author + '</label>'));
                        var add_time = eval('new ' + (proModel.pro_addtime.replace(/\//g, '')));
                        add_time = add_time.format("yyyy-MM-dd");
                        $imgs_box.append($('<label class="title">Time:    ' + add_time + '</label>'));
                        $imgs_box.append($('<div class="lm"><a  href="/PreArea/Home/Course"><label style="font-weight: 300;font-size:13px;">了解更多课程信息</label></a><span></span></div>'));
                        //$body.append($imgs_box);
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 1,
                            // skin: 'imgs_box',
                            area: [$(window).width() * 0.5 + 'px', $(window).height() + 'px'],
                            scrollbar: false,
                            content: $('<div>').append($imgs_box).html(),
                            shade: [0.9, '#000'],
                            shadeClose: true
                            , end: function () {
                                $('.imgs_box').remove();
                                // $('.layui-layer').remove();
                                layer.closeAll();
                                $('.layui-layer').remove();
                            },
                            success: function () {
                                $('.layui-layer-shade').on('mousewheel', function (e) {
                                    return false;
                                })
                            }
                        });
                    } else {
                        alert(data.message);
                    }
                },
                error: function (data) {
                    //            console.log('获取推送信息产生异常:'+JSON.stringify(data));
                    alert("数据获取失败");
                }
            })
        }
    })
    //下拉加载数据
    var dropload = $('.contents').dropload({
        scrollArea: window,
        loadDownFn: function (me) {
            if (window.type == 'undefine') window.type = 1;
            if (window.type == 1) {
                window.currentPage = tab1_currentPage;
                $.ajax({
                    type: 'POST',
                    url: '/BackArea/Production/GetListByPage',
                    data: { "type": window.type, "page": window.currentPage, "limit": 9, "isPublic": 1 },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "0") {
                            var html = "";
                            for (var i = 0; i < data.data.length; i++) {
                                var model = data.data[i];
                                html += '<div class="col-md-4 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in"><div class="box">';
                                html += '<a data-id=' + model.pro_id + ' class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">';
                                html += '<img src="' + model.pro_img + ' " class="img-responsive" alt="w3ls" />';
                                //model.pro_img
                                html += '<div class="b-wrapper">';
                                html += '<p style="font-weight:300">' + model.pro_name + '</p>';
                                html += '</div></div></a></div>';
                            }
                            $('.tab-content').eq(0).append(html);
                            if (data.data.length > 0) {
                                me.noData(false);
                                tab1_currentPage++;
                            } else {
                                tab1LoadEnd = true;
                                me.noData(true);
                            }
                        } else {
                            alert(data.message);
                        }
                        me.resetload();
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            } else if (window.type == 2) {
                window.currentPage = tab2_currentPage;
                $.ajax({
                    type: 'POST',
                    url: '/BackArea/Production/GetListByPage',
                    data: { "type": window.type, "page": window.currentPage, "limit": 9, "isPublic": 1 },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "0") {
                            var html = "";
                            for (var i = 0; i < data.data.length; i++) {
                                var model = data.data[i];
                                html += '<div class="col-md-4 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in"><div class="box">';
                                html += '<a data-id=' + model.pro_id + ' class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">';
                                html += '<img src="' + model.pro_img + ' " class="img-responsive" alt="w3ls" />';
                                //model.pro_img
                                html += '<div class="b-wrapper">';
                                html += '<p style="font-weight:300">' + model.pro_name + '</p>';
                                html += '</div></div></a></div>';
                            }
                            $('.tab-content').eq(1).append(html);
                            if (data.data.length > 0) {
                                tab2_currentPage++;
                                me.noData(false);
                            } else {
                                tab2LoadEnd = true;
                                me.noData(true);
                            }
                        } else {
                            alert(data.message);
                        }
                        me.resetload();
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        },
        loadUpFn: function (me) {
            if (window.type == 'undefine') window.type = 1;
            if (window.type == 1) {
                window.currentPage = tab1_currentPage;
                $.ajax({
                    type: 'POST',
                    url: '/BackArea/Production/GetListByPage',
                    data: { "type": window.type, "page": window.currentPage, "limit": 9, "isPublic": 1 },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "0") {
                            var html = "";
                            for (var i = 0; i < data.data.length; i++) {
                                var model = data.data[i];
                                html += '<div class="col-md-4 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in"><div class="box">';
                                html += '<a data-id=' + model.pro_id + ' class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">';
                                html += '<img src="' + model.pro_img + ' " class="img-responsive" alt="w3ls" />';
                                //model.pro_img
                                html += '<div class="b-wrapper">';
                                html += '<p style="font-weight:300">' + model.pro_name + '</p>';
                                html += '</div></div></a></div>';
                            }
                            $('.tab-content').eq(0).append(html);
                            if (data.data.length > 0) {
                                me.noData(false);
                                tab1_currentPage++;
                            } else {
                                tab1LoadEnd = true;
                                me.noData(true);
                            }
                        } else {
                            alert(data.message);
                        }
                        me.resetload();
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            } else if (window.type == 2) {
                window.currentPage = tab2_currentPage;
                $.ajax({
                    type: 'POST',
                    url: '/BackArea/Production/GetListByPage',
                    data: { "type": window.type, "page": window.currentPage, "limit": 9, "isPublic": 1 },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "0") {
                            var html = "";
                            for (var i = 0; i < data.data.length; i++) {
                                var model = data.data[i];
                                html += '<div class="col-md-4 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in"><div class="box">';
                                html += '<a data-id=' + model.pro_id + ' class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">';
                                html += '<img src="' + model.pro_img + ' " class="img-responsive" alt="w3ls" />';
                                //model.pro_img
                                html += '<div class="b-wrapper">';
                                html += '<p style="font-weight:300">' + model.pro_name + '</p>';
                                html += '</div></div></a></div>';
                            }
                            $('.tab-content').eq(1).append(html);
                            if (data.data.length > 0) {
                                tab2_currentPage++;
                                me.noData(false);
                            } else {
                                tab2LoadEnd = true;
                                me.noData(true);
                            }
                        } else {
                            alert(data.message);
                        }
                        me.resetload();
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        }
    });
    $(document).ready(function () {
        $('#home-tab').click();
    })
</script>
</body>
</html>
    <div class="footer">
        <!-- footer-->
        <div class="container">
            <div class="footer-block">
                <!-- footer block -->
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <div class="footer-widget">

                            <ul class="listnone contact">
                                <li> Yifeeling Design Lab（一种感动） </li>
                                <li>郑州市金水区东风路财智名座1625</li>
                                <li>郑州市中原区翠竹街郑州大学大学科技园</li>
                                <li>COPYRIGHT@Yifeeling Design Lab</li>
								<li>豫ICP备19014938号</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="footer-widget footer-social">
                            <!-- social block -->

                            <ul class="listnone" style="color:white;">
                                <li>
                                     电话：+86 18129910749
                                </li>
                                <li>电子邮件： young@imlab.cc</li>

                            </ul>
                        </div>
                        <!-- /.social block -->
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="footer-widget widget-newsletter">
                            <!-- newsletter block -->

                            <ul class="listnone">
                                <li>
                                    <a href="https://www.zcool.com.cn/u/1172681"> <i class="zcool"></i></a>
                                </li>

                                <li>
                                    <a href="https://www.puxiang.com/u207981"> <i class="pu"></i></a>
                                </li>
                                <li>
                                    <a href="https://www.behance.net/yanglei."> <i class="be"></i></a>
                                </li>
                                <li>
                                    <a href="https://www.pinterest.com/YifeelingDesignLab/"> <i class="pinter"></i></a>
                                </li>
                                <!--<li><a href="#"><i class="fa fa-twitter"></i> </a></li>
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i> </a></li>-->

                            </ul>
                        </div>

                        <!-- /input-group -->
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
                        <img src="/Content/images/code.jpg" alt="Alternate Text" style="width:45%;display:block;margin:auto;padding-top:11px;" />
                    </div>
                        <!-- newsletter block -->
                    </div>
                </div>

            <!-- /.tiny footer block -->
        </div>
        <!-- /.footer block -->
    </div>
    
    <script src="/ContentPre/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/ContentPre/js/bootstrap.min.js"></script>
    <script src="/ContentPre/js/menumaker.js"></script>
    <script src="/ContentPre/js/jquery.sticky.js"></script>
    <script src="/ContentPre/js/sticky-header.js"></script>
    <script src="/ContentPre/js/common.js"></script>
    <script>
        var lis = $('#navigation li');
        $(lis).each(function (index, item) {
            if ($(item).hasClass('active')) {
                $(item).removeClass("active");
            }
        })
        var curLiIndex = '1';
        $(lis[curLiIndex]).addClass("active");
    </script>

    <script>
        var agent = navigator.userAgent;
        if (/.*Firefox.*/.test(agent)) {
            document.addEventListener("DOMMouseScroll", function (e) {
                e = e || window.event;
                var detail = e.detail;
                if (detail > 0) {
                    $("#header").css('display', 'none');
                    $("#content-box").css('padding-top', '0px')
                    
                } else {
                    $("#header").css('display', 'block');
                    $("#content-box").css('padding-top', '82px')
                    
                }
            });
        } else {
            document.onmousewheel = function (e) {
                e = e || window.event;
                var wheelDelta = e.wheelDelta;
                if (wheelDelta > 0) {
                    $("#header").css('display', 'block');
                    $("#content-box").css('padding-top', '82px')
                    
                } else {
                    $("#header").css('display', 'none');
                    $("#content-box").css('padding-top', '0px')
                    
                }
            }
        }
        $(function () {
            var t = 0;
            var p = 0;
            $(window).scroll(function (e) {
                p = $(this).scrollTop();

                if (t <= p && $(this).scrollTop() > 20) {
                    $('.header').fadeOut(600);
                }

                else {
                    $('.header').fadeIn(600);
                }
                setTimeout(function () { t = p; }, 0);

            });
        });
    </script>
    
</body>
</html>
